@charset "UTF-8";
/* CSS Document */
.wrapBox{width:100%;height:100%;position:fixed;}
.container {width:100%; float:inherit; overflow:hidden;  }
.contentBox { width:1200px; float:inherit; margin:0 auto; height:100%;position:relative; z-index:0; }
.container h3 { width:200px; line-height:100%; font-size:60px; color:#3794dc; position:absolute; z-index:1; display:block; top:27%;   opacity:1;}
.container strong { width:200px; height:40px; line-height:100%; display:block; text-indent:-9999px; position:absolute; z-index:1; top:330px; text-indent:-9999px; ; opacity:1;}
.container p { width:300px; line-height:30px; font-size:18px; color:#666; position:absolute; z-index:1; display:block; top:400px;   opacity:1;}
.container .iconBox { width:120px; height:180px; position:absolute;; z-index:1; top:500px;  opacity:1;}
.container .iconBox span { width:116px; height:116px; display:block; float:left; border:2px solid #83bdea; border-radius:60px; background-position:center center; background-repeat:no-repeat; cursor:pointer; }
.container .iconBox:hover span { background-color:#3794dc; border-color:#3794dc; }
.container .iconBox b { width:100%; float:left; margin-top:15px; font-size:18px; color:#666; text-align:center; line-height:100%; display:block; font-weight:normal;  }
.container .iconBox:hover b { color:#3794dc; }
.container .imgBox { position:absolute; z-index:1; }
.container .imgBox img { height:100%; }
.container .icon1 {opacity:1; }
.container .icon2 {  opacity:1; }
.container .icon3 {  opacity:1; }

/**************************************************************************/
.slideBar { width:30px; height:320px; position:fixed; z-index:5000; right:10px; }
.slideBar a { width:30px; height:30px; background:rgba(0,0,0,0.6); border-radius:15px; line-height:30px; text-align:center; display:block; margin-bottom:10px; color:#fff; font-size:14px; overflow:hidden; -webkit-transition:width 300ms ease; -moz-transition:width 300ms ease; transition:width 300ms ease; cursor:pointer; float:right; position:relative; z-index:0;}
.slideBar a span { width:30px; height:30px; float:right; line-height:30px; display:block;  }
.slideBar a b { width:60px; height:30px; position:absolute; z-index:1; top:0; right:30px; line-height:30px; display:block; font-weight:normal;  }
.slideBar a:hover { width:90px; background:rgba(8,124,213,0.8); }
.slideBar a.active { width:90px; background:rgba(8,124,213,0.8); }
.slideBar a.qq:hover { width:100px; }
.slideBar a.tel b { width:120px; }
.slideBar a.tel:hover { width:150px; }
.slideBar a.code b { width:140px; }
.slideBar a.code b img { width:120px; height:120px; margin:10px; border-radius:5px; }
.slideBar a.code p { width:120px; line-height:20px; position:absolute; z-index:1; right:40px; top:140px; text-align:center; }
.slideBar a.code:hover { width:170px; height:200px; }

/**************************************************************************/
.focus { width:100%; height:900px; float:inherit; overflow:hidden; position:relative; z-index:0; }
.focus .maxImg { height:100%; width:9600px; position:absolute; z-index:1; left:0; top:0;-webkit-transition:left 300ms ease; -moz-transition:left 300ms ease; transition:left 300ms ease;}
.focus .maxImg li { height:100%; float:left;  text-align:center; overflow:hidden; }
.focus .maxImg li a { float:left;  display:block; width:100%; height:100%; text-align:center;}
.focus .maxImg li img { width:1920px;position:relative; left:50%;margin-left:-960px; float:left;}

.focus .pointer { width:20%; position:absolute; z-index:2; bottom:50px; left:40%; text-align:center; }
.focus .pointer li { display:inline-block; width:40px;  height:5px; margin:0 5px;  line-height:10px; background:rgba(0,0,0,0.6); border-radius:20px; }
.focus .pointer li.active { background:#fff; }
.focus .scrollIcon { width:5%; height:50px; position:absolute; z-index:2; left:47.5%; bottom:5px; background:url(../ui/indexScrollIcon.png) center center no-repeat; opacity:0.6; }

/**************************************************************************/
.enterrise { background:url(../ui/indexBg1.jpg); background-size:cover; }
.enterrise h3 { left:0px; opacity:1;  transition:all 1s ease-out 1s;}
.enterrise strong { background:url(../ui/indexText_1.png) left center no-repeat; left:0px; top:330px; transition:all 1s ease-out 1.1s;}
.enterrise  p {  left:0px; transition:all 1s ease-out 1.2s; }
.enterrise .imgBox { width:1120px; height:640px; bottom:0; left:440px;  transition:all 1s ease-out 0s;}
.enterrise  .icon1 {  left:0px;   transition:all 1s ease-out 1.2s;  }  
.enterrise  .icon1 span { background-image:url(../ui/indexIcon_1_1_1.png) }
.enterrise  .icon1:hover span { background-image:url(../ui/indexIcon_1_1_2.png) }
.enterrise  .icon2 {  left:190px;   transition:all 1s ease-out 1.3s; }  
.enterrise  .icon2 span { background-image:url(../ui/indexIcon_1_2_1.png); }
.enterrise  .icon2:hover span { background-image:url(../ui/indexIcon_1_2_2.png); }
.enterrise  .icon3 {  left:380px; transition:all 1s ease-out 1.4s; }  
.enterrise  .icon3 span { background-image:url(../ui/indexIcon_1_3_1.png); }
.enterrise  .icon3:hover span { background-image:url(../ui/indexIcon_1_3_2.png); }

.enterrise  .comeout h3 {  opacity:0;   }
.enterrise  .comeout  strong {   opacity:0; }
.enterrise  .comeout  p {   opacity:0; }
.enterrise .comeout .imgBox { bottom:-640px; opacity:0;}
.enterrise  .comeout  .icon1 { left:100px; opacity:0;  }  
.enterrise  .comeout  .icon2 { left:340px; opacity:0;  }  
.enterrise  .comeout  .icon3 { left:580px; opacity:0; }  

/**************************************************************************/
.production { background:url(../ui/indexBg2.jpg); background-size:cover; }
.production h3 { right:0px; text-align:right; transition:all 1s ease-out 1.2s; }
.production strong { background:url(../ui/indexText_2.png) left center no-repeat; right:0px; top:330px; transition:all 1s ease-out 1.3s; }
.production  p {  right:0px; text-align:right;transition:all 1s ease-out 1.4s;  }
.production .imgBox0 { width:510px; height:100%; top:0; right:800px;position:absolute; transition:all 2s ease 0s; overflow:hidden; }
.production .imgBox0 img { width:100%; height:auto; }
.production .imgBox1 { width:220px; height:320px; top:300px;left:0; transition:all 1s ease 0.7s; }
.production .imgBox2 { width:250px; height:350px; top:280px; left:140px;  z-index:2;  transition:all 0.5s ease 0.5s;}
.production .imgBox3 { width:220px; height:320px; top:300px; left:320px;  transition:all 1s ease 0.7s; }
.production  .icon1 {  right:380px; transition:all 1s ease-out 1.7s;  }  
.production  .icon1 span { background-image:url(../ui/indexIcon_2_1_1.png) }
.production  .icon1:hover span { background-image:url(../ui/indexIcon_2_1_2.png) }
.production  .icon2 {  right:190px;  transition:all 1s  ease-out 1.6s;  }  
.production  .icon2 span { background-image:url(../ui/indexIcon_2_2_1.png); }
.production  .icon2:hover span { background-image:url(../ui/indexIcon_2_2_2.png); }
.production  .icon3 {  right:0px;transition:all 1s  ease-out 1.5s; }  
.production  .icon3 span { background-image:url(../ui/indexIcon_2_3_1.png); }
.production  .icon3:hover span { background-image:url(../ui/indexIcon_2_3_2.png); }

.production  .comeout h3 {  opacity:0;   }
.production  .comeout  strong {   opacity:0; }
.production  .comeout  p {   opacity:0; }
.production .comeout .imgBox {  opacity:0;}
.production  .comeout  .icon1 { opacity:0; right:580px;  }  
.production  .comeout  .icon2 {  opacity:0; right:340px; }  
.production  .comeout  .icon3 {  opacity:0; right:100px;}  
.production  .comeout .imgBox0 { opacity:0; height:0;  }
.production  .comeout .imgBox1 { left:180px; opacity:0}
.production  .comeout .imgBox2 { top:380px; opacity:0 }
.production  .comeout .imgBox3 {  left:180px; opacity:0 }

/**************************************************************************/
.service { background:url(../ui/indexBg3.jpg); background-size:cover; }
.service h3 { left:0px;  transition:all 1s ease-out 0.8s;}
.service strong { background:url(../ui/indexText_3.png) left center no-repeat; left:0px; top:330px;transition:all 1s ease-out 0.9s;}
.service  p {  left:0px; transition:all 1s ease-out 1s; }
.service .imgBox { width:740px; height:730px; bottom:0; left:600px; transition:all 1s ease-out 0s;}
.service  .icon1 {  left:0px; transition:all 1s ease-out 1s;  }  
.service  .icon1 span { background-image:url(../ui/indexIcon_3_1_1.png) }
.service  .icon1:hover span { background-image:url(../ui/indexIcon_3_1_2.png) }
.service  .icon2 {  left:190px;  transition:all 1s ease-out 1.1s;  }  
.service  .icon2 span { background-image:url(../ui/indexIcon_3_2_1.png); }
.service  .icon2:hover span { background-image:url(../ui/indexIcon_3_2_2.png); }
.service  .icon3 {  left:380px; transition:all 1s ease-out 1.2s;  }  
.service  .icon3 span { background-image:url(../ui/indexIcon_3_3_1.png); }
.service  .icon3:hover span { background-image:url(../ui/indexIcon_3_3_2.png); }

.service  .comeout h3 {  opacity:0;   }
.service  .comeout  strong { opacity:0; }
.service  .comeout  p { opacity:0; }
.service  .comeout .imgBox { left:200px; opacity:0;}
.service  .comeout  .icon1 { left:100px; opacity:0;  }  
.service  .comeout  .icon2 { left:340px; opacity:0;  }  
.service  .comeout  .icon3 { left:580px; opacity:0; }  

/**************************************************************************/  
.plan { width:100%;  background:url(../ui/indexBg4.jpg); background-size:cover; position:relative; z-index:0; }
footer { position:absolute; z-index:1; left:0; bottom:0; background:rgba(0,0,0,0.7); }
.plan .planBox { width:30%;  padding:40px 5%; position:absolute; z-index:1; left:30%; top:250px; background:rgba(255,255,255,0.9);  transition:all 1s ease-out 0.5s; }
.plan .planBox strong { width:100%; line-height:100%; font-size:50px; color:#3794dc; text-align:center; display:block; }
.plan .planBox b { width:100%; height:40px; text-align:center; display:block; margin:10px 0 20px 0; }
.plan .planBox p { width:100%; text-align:center; display:block; line-height:28px; color:#666; font-size:18px; }
.plan .planBox  a { width:238px; height:58px; line-height:58px; display:block; margin:30px auto 0 auto; background:#3794dc; text-align:center; font-size:18px; color:#fff; border-radius:10px; border:1px solid #3794dc; }
.plan .planBox  a:hover { background:none; color:#3794dc; }

.plan .trait {width:100%; height:100px; position:absolute; z-index:1; left:0; bottom:150px; text-align:center;  transition:all 1s ease-out 0.5s;}
.plan .trait a { width:300px; height:100%; display:inline-block; text-align:center; }
.plan .trait a span { width:60px; height:60px; display:block; margin:0 auto; border:2px solid #fff; float:inherit; border-radius:50%; background:rgba(0,0,0,0.5);}
.plan .trait a span img { width:100%; height:100%; }
.plan .trait a b { height:30px; line-height:30px; display:inline-block; float:inherit; margin:10px auto; padding:0 20px; border-radius:20px; background:rgba(8,124,213,0.8); text-align:center; font-size:16px; color:#fff; font-weight:normal; }
.plan .trait a:hover span  { background:#3794dc; border-color:#3794dc;  }
.plan .trait a:hover b { background:#3794dc; }

.plan  .comeout  .planBox { top:0;  opacity:0;   }
.plan  .comeout  .trait { bottom:0;  opacity:0;   }



@keyframes play{
	from{
		opacity:0.3;
	}
	to{
		opacity:1;
	}
}
@-webkit-keyframes play{
	from{
		opacity:0.3;
	}
	to{
		opacity:1;
	}
}











